<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <title>原生js实现幻灯片</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2899992_mmhaxjqbsi7.css">
 
</head>
 
<style>
 
    .container{
 
        width: 100%;
 
        height: 500px;
 
        position: relative;
 
    }
 
    .content{
 
        width: 900px;
 
        height: 450px;
 
        position: relative;
 
        overflow: hidden;
 
        border: 1px solid seagreen;
 
        margin: 0 auto;
 
    }
 
    .slider-img{
 
        width: 900px;
 
        height: 450px;
 
        margin: 10px auto;
 
    }
 
    .slider-img img{
 
        vertical-align: top;
 
        width: 800px;
 
        height: 400px;
 
        margin: 10px 50px;
 
        display: block;
 
    }
 
    .left{
 
        margin-top: -300px;
 
        margin-left: 50px;
 
        width: 100px;
 
        height: 100px;
 
 
 
    }
 
    .left img,.right img{
 
        width: 100px;
 
        height: 100px;
 
    }
 
    .right{
 
        margin-top: -100px;
 
        margin-right: 50px;
 
        float: right;
 
        width: 100px;
 
        height: 100px;
 
    }
 
 
 
    .dot{
 
        position: relative;
 
        top: 23%;
 
        left: 43%;
 
        width: 50%;
 
    }
 
    .dotul{
 
        width: 450px;
 
 
 
    }
 
    .dotul li{
 
        width: 20px;
 
        height: 20px;
 
        background-color: seagreen;
 
        list-style: none;
 
        float: left;
 
        border-radius: 20px;
 
        margin-left: 15px;
 
        z-index: 999;
 
        cursor: pointer;
 
    }
 
    .active{
 
        background-color: orangered !important;
 
    }
 
 
 
</style>
 
<body>
 
    <div class="container" id="contaner">
 
        <div class="content" id="content">
 
            <div class="slider-img" id="slider" >
 
                <a href="javascript:;">
 
                    <img src="/publics/front-stage/img/pic2.webp" alt="1.jpg" id="img">
 
                </a>
 
            </div>
 
        </div>
 
        <div class="btn">
 
            <div class="left" id="left">
 
                <a href=" ###"><i class='iconfont icon-xiangzuo'></i></a>
 
            </div>
 
            <div class="right" id="right">
 
                <a href=" ###"><i class='iconfont icon-xiangyou'></i></a>
 
            </div>
 
        </div> 
 
    </div>
 
<script>
 
    //首先要获取元素
 
    var container = document.getElementById("container");
 
    var content = document.getElementById("content");
 
    var slider = document.getElementById("slider");
 
    var img = document.getElementById("img");
 
    // var ul = document.getElementById("ul");
 
    // var li = document.getElementsByTagName("li");
 
    var left = document.getElementById("left");
 
    var right = document.getElementById("right");
 
    var num = 0;
 
    var timer = null;
 
 
 
 
 
    //图片位置
 
    var arrUrl = ["/publics/front-stage/img/pic2.webp","/publics/front-stage/img/pic3.webp","/publics/front-stage/img/pic4.webp"];
 
    left.onclick = function (ev) {
 
        num--;
 
        if (num == -1){
 
            num = arrUrl.length-1;//如果到了第一张，返回最后一张
 
        }
 
        changeImg();
 
    };
 
    right.onclick = function (ev) {
 
        num++;
 
        if (num == arrUrl.length){
 
            num = 0;//如果是最后一张，则返回第一张
 
        }
 
        changeImg();
 
    };
 
    //图片切换函数
 
    function changeImg() {
        img.src = arrUrl[num];//改变图片src位置
    }

</script>
 
</body>
 
</html>